{# SPDX-License-Identifier: Apache-2.0 -#}

{% extends "admin/base.html" %}

{% block title %}{{ organization.name }}{% endblock %}

{% block breadcrumb %}
  <li class="breadcrumb-item"><a href="{{ request.route_path('admin.organization.list') }}">Organizations</a></li>
  <li class="breadcrumb-item active">{{ organization.name }}</li>
{% endblock %}

{% block content %}
  <div class="row">
    <div class="col-md-3">
      <div class="card card-primary">
        <div class="card-body card-widget widget-user-1">
          <div class="widget-user-header">
            <h3 class="widget-user-username text-center">{{ organization.display_name }}</h3>
          </div>
        </div>
        <div class="card-body">
          <p class="text-muted text-center">
            Created on {{ organization.created|format_date() }}
          </p>
        </div>
      </div>

      <div class="card">
        <div class="card-header with-border">
          <h2 class="card-title">Actions</h2>
        </div>
        <div class="card-body">

            <button
              type="button"
              class="btn btn-danger btn-block"
              data-toggle="modal"
              data-target="#renameModal" {{ 'disabled' if not request.has_permission(Permissions.AdminOrganizationsNameWrite) }}
              title="Rename"
            >
              <i class="icon fa fa-rotate"></i> Rename
            </button>

            <div class="modal fade" id="renameModal" tabindex="-1" role="dialog">
              <form method="POST" action="{{ request.route_path('admin.organization.rename', organization_id=organization.id) }}">
                <input name="csrf_token" type="hidden" value="{{ request.session.get_csrf_token() }}">
                <div class="modal-dialog" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h4 class="modal-title" id="renameModalLabel">
                        Rename {{ organization.name }}?
                      </h4>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                    <div class="modal-body">
                      <p>
                        This will rename <strong>{{ organization.name }}</strong>
                      </p>
                      <div class="form-group">
                        <label for="renameModalOrganizationName">
                          New Organization Name
                        </label>
                        <input type="text" id="renameModalOrganizationName" class="form-control" aria-describedby="renameModalOrganizationNameHelpBlock" name="new_organization_name" placeholder="{{ organization.name }}" required>
                        <span id="renameModalOrganizationNameHelpBlock">
                          Type the NEW organization name for "{{ organization.name }}" to confirm you are <strong>renaming</strong> the organization.
                        </span>
                      </div>
                    </div>
                    <div class="modal-footer justify-content-between">
                      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                      <button type="submit" class="btn btn-danger">
                        <i class="icon fa fa-check"></i> Rename organization
                      </button>
                    </div>
                  </div>
                </div>
              </form>
            </div>

        </div>
      </div>
    </div>

    <div class="col-md-9">
      <div class="card">
        <div class="card-header with-border">
          <h3 class="card-title">Organization Details</h3>
        </div>
        <div class="card-body">
          <form method="POST" action="{{ request.route_path('admin.organization.detail', organization_id=organization.id) }}">
            <input name="csrf_token" type="hidden" value="{{ request.session.get_csrf_token() }}">
            <div class="form-horizontal">
              <div class="form-group">
                <label class="col-sm-5 control-label">
                  Organization Account Name
                </label>
                <div class="col-sm-7">
                  <input class="form-control" value="{{ organization.name }}" readonly>
                  <small class="form-text text-muted">Account name cannot be changed here. Use the Rename action instead.</small>
                </div>
              </div>
              <div class="form-group">
                <label for="display_name" class="col-sm-5 control-label">
                  Organization Display Name
                </label>
                <div class="col-sm-7">
                  {{ form.display_name(class="form-control", value=organization.display_name, disabled=(not request.has_permission(Permissions.AdminOrganizationsWrite))) }}
                  {% if form.display_name.errors %}
                    <div class="text-danger">{{ form.display_name.errors[0] }}</div>
                  {% endif %}
                </div>
              </div>
              <div class="form-group">
                <label for="link_url" class="col-sm-5 control-label">
                  Organization URL
                </label>
                <div class="col-sm-7">
                  <div class="input-group">
                    {{ form.link_url(class="form-control", value=organization.link_url, disabled=(not request.has_permission(Permissions.AdminOrganizationsWrite))) }}
                    <span class="input-group-append input-group-btn">
                      <a href="{{ organization.link_url }}" target="_blank" rel="noopener noreferrer" class="btn btn-default" title="Visit organization URL">
                        <i class="fa-solid fa-arrow-up-right-from-square"></i>
                      </a>
                    </span>
                  </div>
                  {% if form.link_url.errors %}
                    <div class="text-danger">{{ form.link_url.errors[0] }}</div>
                  {% endif %}
                </div>
              </div>
              <div class="form-group">
                <label for="description" class="col-sm-5 control-label">
                  Organization Description
                </label>
                <div class="col-sm-7">
                  {{ form.description(class="form-control", rows="4", disabled=(not request.has_permission(Permissions.AdminOrganizationsWrite))) }}
                  {% if form.description.errors %}
                    <div class="text-danger">{{ form.description.errors[0] }}</div>
                  {% endif %}
                </div>
              </div>
              <div class="form-group">
                <label for="orgtype" class="col-sm-5 control-label">
                  Organization Type
                </label>
                <div class="col-sm-7">
                  {{ form.orgtype(class="form-control", disabled=(not request.has_permission(Permissions.AdminOrganizationsWrite))) }}
                  {% if form.orgtype.errors %}
                    <div class="text-danger">{{ form.orgtype.errors[0] }}</div>
                  {% endif %}
                </div>
              </div>
              {% if request.has_permission(Permissions.AdminOrganizationsWrite) %}
              <div class="form-group">
                <div class="col-sm-offset-5 col-sm-7">
                  <button type="submit" class="btn btn-primary">
                    <i class="fa fa-save"></i> Save Changes
                  </button>
                </div>
              </div>
              {% endif %}
            </div>
          </form>
        </div>
      </div>

      <div class="card" id="organization-limits">
        <div class="card-header with-border">
          <h3 class="card-title">Organization Limits</h3>
        </div>
        <div class="card-body">
          <table class="table table-hover">
            <tbody>
              <tr>
                <form method="POST" action="{{ request.route_path('admin.organization.set_upload_limit', organization_id=organization.id) }}">
                  <input name="csrf_token" type="hidden" value="{{ request.session.get_csrf_token() }}">
                  <td>Upload limit</td>
                  <td>
                    {% if organization.upload_limit %}
                    {{ organization.upload_limit|filesizeformat(binary=True) }}
                    {% else %}
                    Default ({{ MAX_FILESIZE|filesizeformat(binary=True) }})
                    {% endif %}
                  </td>
                  <td>
                    {% if organization.upload_limit %}
                    {% set upload_limit_value = organization.upload_limit / ONE_MIB %}
                    {% else %}
                    {% set upload_limit_value = '' %}
                    {% endif %}
                    <input type="number" name="upload_limit" id="uploadLimit" min="{{ MAX_FILESIZE / ONE_MIB }}" max="{{ UPLOAD_LIMIT_CAP / ONE_MIB }}" step=1 value="{{ upload_limit_value|int }}"> MiB
                  </td>
                  <td>
                    <button type="submit" class="btn btn-primary btn-sm" {{ 'disabled' if not request.has_permission(Permissions.AdminOrganizationsWrite) }}>Submit</button>
                  </td>
                </form>
              </tr>
              <tr>
                <form method="POST" action="{{ request.route_path('admin.organization.set_total_size_limit', organization_id=organization.id) }}">
                  <input name="csrf_token" type="hidden" value="{{ request.session.get_csrf_token() }}">
                  <td>Total size limit</td>
                  <td>
                    {% if organization.total_size_limit %}
                    {{ organization.total_size_limit|filesizeformat(binary=True) }}
                    {% else %}
                    Default ({{ MAX_PROJECT_SIZE|filesizeformat(binary=True) }})
                    {% endif %}
                  </td>
                  <td>
                    {% if organization.total_size_limit %}
                    {% set total_size_limit_value = organization.total_size_limit // ONE_GIB %}
                    {% else %}
                    {% set total_size_limit_value = '' %}
                    {% endif %}
                    <input type="number" name="total_size_limit" id="totalSizeLimit" min="{{ MAX_PROJECT_SIZE / ONE_GIB }}" step=1 value="{{ total_size_limit_value|int }}"> GiB
                  </td>
                  <td>
                    <button type="submit" class="btn btn-primary btn-sm" {{ 'disabled' if not request.has_permission(Permissions.AdminOrganizationsWrite) }}>Submit</button>
                  </td>
                </form>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="card">
        <div class="card-header with-border">
          <h3 class="card-title">Manual Activation</h3>
        </div>

        <div class="card-body">
          {% if organization.manual_activation %}
            <div class="row">
              <div class="col-md-6">
                <strong>Seat Limit:</strong> {{ organization.manual_activation.seat_limit }}
                <br><small class="text-muted">Current members: {{ organization.manual_activation.current_member_count }} / {{ organization.manual_activation.seat_limit }}</small>
              </div>
              <div class="col-md-6">
                <strong>Expires:</strong> {{ organization.manual_activation.expires|format_date() }}
                {% if organization.manual_activation.is_active %}
                  <span class="badge badge-success">Active</span>
                {% else %}
                  <span class="badge badge-danger">Expired</span>
                {% endif %}
              </div>
            </div>
            <div class="row mt-2">
              <div class="col-md-12">
                <small class="text-muted">
                  Created by admin on {{ organization.manual_activation.created|format_date() }}
                </small>
              </div>
            </div>
          {% else %}
            <p class="text-muted">No manual activation configured for this organization.</p>
          {% endif %}
        </div>

        {% if request.has_permission(Permissions.AdminOrganizationsWrite) %}
        <div class="card-footer">
          {% if not organization.manual_activation %}
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addManualActivationModal">
              <i class="fa fa-plus"></i> Add Manual Activation
            </button>
          {% else %}
            <button type="button" class="btn btn-warning mr-2" data-toggle="modal" data-target="#updateManualActivationModal">
              <i class="fa fa-edit"></i> Update Activation
            </button>
            <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteManualActivationModal">
              <i class="fa fa-times"></i> Remove Activation
            </button>
          {% endif %}
        </div>
        {% endif %}
      </div> <!-- .card -->

      <!-- Add Manual Activation Modal -->
      <div class="modal fade" id="addManualActivationModal" tabindex="-1" role="dialog">
        <form method="POST" action="{{ request.route_path('admin.organization.add_manual_activation', organization_id=organization.id) }}">
          <input name="csrf_token" type="hidden" value="{{ request.session.get_csrf_token() }}">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title">Add Manual Activation</h4>
                <button type="button" class="close" data-dismiss="modal">
                  <span>&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <div class="form-group">
                  <label for="seat_limit">Seat Limit</label>
                  {{ manual_activation_form.seat_limit(class="form-control", id="seat_limit") }}
                  <small class="form-text text-muted">Maximum number of organization members allowed</small>
                </div>
                <div class="form-group">
                  <label for="expires">Expiration Date</label>
                  {{ manual_activation_form.expires(class="form-control", id="expires") }}
                  <small class="form-text text-muted">When this activation will expire</small>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary">Add Manual Activation</button>
              </div>
            </div>
          </div>
        </form>
      </div>

      <!-- Update Manual Activation Modal -->
      {% if organization.manual_activation %}
      <div class="modal fade" id="updateManualActivationModal" tabindex="-1" role="dialog">
        <form method="POST" action="{{ request.route_path('admin.organization.update_manual_activation', organization_id=organization.id) }}">
          <input name="csrf_token" type="hidden" value="{{ request.session.get_csrf_token() }}">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title">Update Manual Activation</h4>
                <button type="button" class="close" data-dismiss="modal">
                  <span>&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <div class="form-group">
                  <label for="update_seat_limit">Seat Limit</label>
                  <input type="number" name="seat_limit" id="update_seat_limit" class="form-control"
                         value="{{ organization.manual_activation.seat_limit }}" min="1" required>
                  <small class="form-text text-muted">Maximum number of organization members allowed</small>
                </div>
                <div class="form-group">
                  <label for="update_expires">Expiration Date</label>
                  <input type="date" name="expires" id="update_expires" class="form-control"
                         value="{{ organization.manual_activation.expires.strftime('%Y-%m-%d') }}" required>
                  <small class="form-text text-muted">When this activation will expire</small>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-warning">Update Activation</button>
              </div>
            </div>
          </div>
        </form>
      </div>

      <!-- Delete Manual Activation Modal -->
      <div class="modal fade" id="deleteManualActivationModal" tabindex="-1" role="dialog">
        <form method="POST" action="{{ request.route_path('admin.organization.delete_manual_activation', organization_id=organization.id) }}">
          <input name="csrf_token" type="hidden" value="{{ request.session.get_csrf_token() }}">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title">Remove Manual Activation?</h4>
                <button type="button" class="close" data-dismiss="modal">
                  <span>&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <p>
                  This will remove manual activation from <strong>{{ organization.name }}</strong>.
                  The organization will no longer have manual activation privileges.
                </p>
                <hr>
                <p>
                  To confirm, type the organization name:
                </p>
                <input type="text" name="confirm" class="form-control" placeholder="{{ organization.name }}" required>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-danger">Remove Activation</button>
              </div>
            </div>
          </div>
        </form>
      </div>
      {% endif %}

      <div class="card">
        <div class="card-header with-border">
          <h3 class="card-title">Custom OIDC Issuers</h3>
        </div>

        <div class="card-body">
          {% if organization.oidc_issuers %}
            <table class="table table-hover">
              <thead>
                <tr>
                  <th>Issuer Type</th>
                  <th>Issuer URL</th>
                  <th>Created</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                {% for issuer in organization.oidc_issuers %}
                <tr>
                  <td>{{ issuer.issuer_type.value }}</td>
                  <td>{{ issuer.issuer_url }}</td>
                  <td>{{ issuer.created|format_date() }}</td>
                  <td>
                    <button type="button" class="btn btn-sm btn-danger" data-toggle="modal" data-target="#deleteOIDCIssuerModal-{{ issuer.id }}" {{ 'disabled' if not request.has_permission(Permissions.AdminOrganizationsWrite) }}>
                      <i class="fa fa-times"></i> Delete
                    </button>
                  </td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          {% else %}
            <p class="text-muted">No custom OIDC issuers configured for this organization.</p>
          {% endif %}
        </div>

        {% if request.has_permission(Permissions.AdminOrganizationsWrite) %}
        <div class="card-footer">
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addOIDCIssuerModal">
            <i class="fa fa-plus"></i> Add OIDC Issuer
          </button>
        </div>
        {% endif %}
      </div> <!-- .card -->

      <!-- Add OIDC Issuer Modal -->
      <div class="modal fade" id="addOIDCIssuerModal" tabindex="-1" role="dialog">
        <form method="POST" action="{{ request.route_path('admin.organization.add_oidc_issuer', organization_id=organization.id) }}">
          <input name="csrf_token" type="hidden" value="{{ request.session.get_csrf_token() }}">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title">Add Custom OIDC Issuer</h4>
                <button type="button" class="close" data-dismiss="modal">
                  <span>&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <div class="form-group">
                  <label for="issuer_type">Issuer Type</label>
                  {{ oidc_issuer_form.issuer_type(class="form-control", id="issuer_type") }}
                  {% if oidc_issuer_form.issuer_type.errors %}
                    <div class="text-danger">{{ oidc_issuer_form.issuer_type.errors[0] }}</div>
                  {% endif %}
                  <small class="form-text text-muted">Select the type of OIDC issuer</small>
                </div>
                <div class="form-group">
                  <label for="issuer_url">Issuer URL</label>
                  {{ oidc_issuer_form.issuer_url(class="form-control", id="issuer_url", placeholder="https://gitlab.example.com") }}
                  {% if oidc_issuer_form.issuer_url.errors %}
                    <div class="text-danger">{{ oidc_issuer_form.issuer_url.errors[0] }}</div>
                  {% endif %}
                  <small class="form-text text-muted">Custom OIDC issuer URL (must start with <code>https://</code>)</small>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary">Add OIDC Issuer</button>
              </div>
            </div>
          </div>
        </form>
      </div>

      <!-- Delete OIDC Issuer Modals -->
      {% if organization.oidc_issuers %}
        {% for issuer in organization.oidc_issuers %}
        <div class="modal fade" id="deleteOIDCIssuerModal-{{ issuer.id }}" tabindex="-1" role="dialog">
          <form method="POST" action="{{ request.route_path('admin.organization.delete_oidc_issuer', organization_id=organization.id, issuer_id=issuer.id) }}">
            <input name="csrf_token" type="hidden" value="{{ request.session.get_csrf_token() }}">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h4 class="modal-title">Delete OIDC Issuer?</h4>
                  <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  <p>
                    This will delete the <strong>{{ issuer.issuer_type.value }}</strong> OIDC issuer at <strong>{{ issuer.issuer_url }}</strong> from <strong>{{ organization.name }}</strong>.
                  </p>
                  <hr>
                  <p>
                    To confirm, type <code>{{ issuer.issuer_url }}</code>:
                  </p>
                  <input type="text" name="confirm" class="form-control" placeholder="{{ issuer.issuer_url }}" required>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                  <button type="submit" class="btn btn-danger">Delete OIDC Issuer</button>
                </div>
              </div>
            </div>
          </form>
        </div>
        {% endfor %}
      {% endif %}

      <div class="card">
        <div class="card-header with-border">
          <h3 class="card-title">Projects</h3>
        </div>

        <div class="card-body">
          {% if organization.projects %}
          <table class="table table-hover" id="projects">
            <thead>
              <tr>
                <th>Project Name</th>
                <th>Total Size</th>
              </tr>
            </thead>
            <tbody>
            {% for project in organization.projects %}
              <tr>
                <td><a href="{{ request.route_path('admin.project.detail', project_name=project.normalized_name) }}">{{ project.name }}</a></td>
                <td>{{ project.total_size | filesizeformat(binary=True) }}</td>
              </tr>
            {% endfor %}
            </tbody>
          </table>
          {% else %}
          No projects.
          {% endif %}
        </div>
      </div> <!-- .card -->

      <div class="card">
        <div class="card-header with-border">
          <h3 class="card-title">Members</h3>
        </div>

        <div class="card-body">
          {% if roles %}
          <table class="table table-hover" id="members">
            <thead>
              <tr>
                <th>User</th>
                <th>Role</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
            {% for role in roles %}
              <tr>
                <td><a href="{{ request.route_path('admin.user.detail', username=role.user.username) }}">{{ role.user.username }}</a></td>
                <td>
                  <form method="POST" action="{{ request.route_path('admin.organization.update_role', organization_id=organization.id, role_id=role.id) }}" style="display: inline;">
                    <input name="csrf_token" type="hidden" value="{{ request.session.get_csrf_token() }}">
                    <div class="input-group input-group-sm">
                      {{ role_forms[role.id].role_name(class_="form-control", disabled=not request.has_permission(Permissions.AdminRoleUpdate)) }}
                      <div class="input-group-append">
                        <button type="submit" class="btn btn-primary btn-sm" {{ 'disabled' if not request.has_permission(Permissions.AdminRoleUpdate) }}>
                          <i class="fa fa-save"></i>
                        </button>
                      </div>
                    </div>
                  </form>
                </td>
                <td>
                  <button type="button" class="btn btn-sm btn-danger" data-toggle="modal" data-target="#deleteRoleModal-{{ role.id }}" {{ 'disabled' if not request.has_permission(Permissions.AdminRoleDelete) }}>
                    <i class="fa fa-times"></i> Remove
                  </button>
                  <div class="modal fade" id="deleteRoleModal-{{ role.id }}" tabindex="-1" role="dialog">
                    <form method="POST" action="{{ request.route_path('admin.organization.delete_role', organization_id=organization.id, role_id=role.id) }}">
                      <input name="csrf_token" type="hidden" value="{{ request.session.get_csrf_token() }}">
                      <div class="modal-dialog" role="document">
                        <div class="modal-content">
                          <div class="modal-header">
                            <h4 class="modal-title">Remove role for {{ role.user.username }}?</h4>
                            <button type="button" class="close" data-dismiss="modal">
                              <span>&times;</span>
                            </button>
                          </div>
                          <div class="modal-body">
                            <p>
                              This will remove the <strong>{{ role.role_name.value }}</strong> role for <strong>{{ role.user.username }}</strong> from <strong>{{ organization.name }}</strong>.
                            </p>
                            <hr>
                            <p>
                              To confirm, type the username:
                            </p>
                            <input type="text" name="username" class="form-control" placeholder="{{ role.user.username }}" required>
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-danger">Remove Role</button>
                          </div>
                        </div>
                      </div>
                    </form>
                  </div>
                </td>
              </tr>
            {% endfor %}
            </tbody>
          </table>
          {% else %}
          No members.
          {% endif %}
        </div>

        <div class="card-footer">
          <form method="POST" action="{{ request.route_path('admin.organization.add_role', organization_id=organization.id) }}" class="form-inline">
            <input name="csrf_token" type="hidden" value="{{ request.session.get_csrf_token() }}">
            <div class="form-group mr-2">
              <label for="username" class="sr-only">Username</label>
              {{ add_role_form.username(class="form-control", placeholder="Username", disabled=not request.has_permission(Permissions.AdminRoleAdd)) }}
            </div>
            <div class="form-group mr-2">
              <label for="role_name" class="sr-only">Role</label>
              {{ add_role_form.role_name(class="form-control", disabled=not request.has_permission(Permissions.AdminRoleAdd)) }}
            </div>
            <button type="submit" class="btn btn-primary" {{ 'disabled' if not request.has_permission(Permissions.AdminRoleAdd) }}>
              <i class="fa fa-plus"></i> Add Member
            </button>
          </form>
        </div>

        <div class="card-header with-border">
          <h3 class="card-title">Invitations</h3>
        </div>

        <div class="card-body">
          {% if organization.invitations %}
          <table class="table table-hover" id="projects">
            <thead>
              <tr>
                <th>User</th>
                <th>Status</th>
              </tr>
            </thead>
            <tbody>
            {% for role in organization.invitations %}
              <tr>
                <td><a href="{{ request.route_path('admin.user.detail', username=role.user.username) }}">{{ role.user.username }}</a></td>
                <td><i>{{ role.invite_status.value }}</i></td>
              </tr>
            {% endfor %}
            </tbody>
          </table>
          {% else %}
          No invitations.
          {% endif %}
        </div>
      </div> <!-- .card -->

      <div class="card">
        <div class="card-header with-border">
          <h3 class="card-title">Teams</h3>
        </div>

        <div class="card-body">
          {% if organization.teams %}
          <table class="table table-hover" id="projects">
            <thead>
              <tr>
                <th>Team</th>
                <th>Members</th>
              </tr>
            </thead>
            <tbody>
            {% for team in organization.teams %}
              <tr>
                <td>{{ team.name }}</td>
                <td>{{ team.members|length }}</td>
              </tr>
            {% endfor %}
            </tbody>
          </table>
          {% else %}
          No teams.
          {% endif %}
        </div>
      </div> <!-- .card -->

    </div>

  </div>
{% endblock %}
